<template>
  <div class="huli-detail">
    <div class="slider">
      <van-swipe
        vertical
        class="huli-wrapper"
        :autoplay="3000"
        v-if="info.picurl && info.picurl.length > 0"
        :show-indicators="false"
      >
        <van-swipe-item v-for="(item, index) in info.picurl" :key="index">
          <img :src="item" alt="" srcset="" />
        </van-swipe-item>
      </van-swipe>
      <img v-else :src="`${staticPath}/img_hulidaojia@2x.png`" alt="" style="width: 100%; height: 200px" />
    </div>
    <div class="desc">
      <div class="title">
        <van-tag type="warning" size="small" plain v-if="info.bargain"
          >特价</van-tag
        >
        {{ info.name }}
      </div>
      <p class="description">
        {{ info.abstract }}
      </p>
      <div class="price-table">
        <div class="left">
          <em>￥</em><i class="num">{{ info.price }}</i>
          <em class="line-price">¥{{ info.lineation }}</em>
        </div>
        <div class="right">
          <em>{{ info.order_num }}人购买</em>
        </div>
      </div>
    </div>

    <div class="common-panel">
      <div class="huli-common-title">
        <h3><em></em>步骤流程如下：</h3>
        <div class="step-wrapper">
          <img :src="`${staticPath}/icon_renqun@2x.png`" alt="" />
        </div>
      </div>
    </div>
    <div class="common-panel">
      <!-- <div class="huli-common-title">
        <h3><em></em>适宜人群：</h3>
        <div class="common-desc">
          <p>肠胀气、便秘、高热患者，长期卧床无法自行排便的患者</p>
        </div>
      </div>
      <div class="huli-common-title">
        <h3><em></em>服务介绍：</h3>
        <div class="common-desc">
          <p>肠胀气、便秘、高热患者，长期卧床无法自行排便的患者</p>
        </div>
      </div>
      <div class="huli-common-title">
        <h3><em></em>服务说明：</h3>
        <div class="common-desc">
          <p>肠胀气、便秘、高热患者，长期卧床无法自行排便的患者</p>
        </div>
      </div>
      <div class="huli-common-title">
        <h3><em></em>材料清单：</h3>
        <div class="common-desc">
          <p>肠胀气、便秘、高热患者，长期卧床无法自行排便的患者</p>
        </div>
      </div>
      <div class="huli-common-title">
        <h3><em></em>健康档案</h3>
        <div class="common-desc">
          <p>肠胀气、便秘、高热患者，长期卧床无法自行排便的患者</p>
        </div>
      </div>
      <div class="huli-common-title">
        <h3><em></em>服务规范</h3>
        <div class="common-desc">
          <p>肠胀气、便秘、高热患者，长期卧床无法自行排便的患者</p>
        </div>
      </div>
      <div class="huli-common-title">
        <h3><em></em>注意事项</h3>
        <div class="common-desc">
          <p>肠胀气、便秘、高热患者，长期卧床无法自行排便的患者</p>
        </div>
      </div> -->
      <div v-html="info.content"></div>
    </div>

    <div class="common-panel" v-if="info.comment && info.comment.length > 0">
      <div class="huli-common-title">
        <h3>
          <em></em>用户评价
          <span class="right-arrow">好评率{{ info.praise }} ></span>
        </h3>
      </div>
      <div
        class="comment-item"
        v-for="(item, index) in info.comment.slice(0,3)"
        :key="index"
      >
        <template v-if="index < 3">
          <van-cell center class="custom-cell" :border="false">
            <template #icon>
              <van-image
                round
                width="40px"
                height="40px"
                :src="item.user_photo"
              />
            </template>
            <template #title>
              <span class="custom-title">{{
                item.username
              }}</span>
            </template>
            <template #label>
              <span class="custom-label">
                <van-rate
                  v-model="item.direction"
                  color="#E02E2E"
                  readonly
                  size="14px"
                />
              </span>
            </template>
          </van-cell>
          <p class="comment-pre" v-if="item.content">
            {{ item.content }}
          </p>
          <!-- <van-grid
            direction="horizontal"
            :column-num="3"
            :gutter="0"
            class="comment-grid"
            v-if="info.comment.length > 0 && item.picurl"
          >
            <van-grid-item
              v-for="(item, index) in item.picurl"
              :key="index"
              @click="handleShowpic(item,index)"
            >
              <van-image :src="item" height="115px" width="115px" />
            </van-grid-item>
          </van-grid> -->
          <van-uploader v-model="item.picurl" preview-full-image :deletable="false" :show-upload="false" />
          <p class="create-time">
            发表于：{{ item.creat_at }}
          </p>
        </template>
      </div>
      <div class="van-hairline--top"></div>
      <div class="flex btn-center" v-if="info.comment.length > 3">
        <van-button size="small"   @click="handleDetail(info.order_id)" round>全部评价</van-button>
      </div>
    </div>


    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-button
        :color="'linear-gradient(0deg, #FF534F 0%, #FF9C78 100%)'"
        text="立即预约"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { nurseItemInfoServer } from "@/service/server";
export default {
  data() {
    return {
      staticPath: process.env.VUE_APP_STATIC_PATH,
      value: 3,
      info: {},
      pic: '',
      show: false
    };
  },

  components: {},

  computed: {},
  created() {
    this.queryInfo(this.$route.params.id);
    console.log(this.$route.params);
  },
  methods: {
    handleShowpic(item,index){
      this.pic = item
      this.show = true
    },

    handleDetail:function(id){
      var orderid = this.info.id;
      this.$router.push('/huli/comment/'+orderid);
    },
    onClickIcon() {},
    onClickButton() {
      this.$router.push({
        path: "/huli/order/index",
        query: {
          // goods_name: this.info.name,
          goods_id: this.info.id,
        },
      });
    },
    async queryInfo(id) {
      let result = await nurseItemInfoServer(id);
      if (result.status == 200) {
        let info = result.data;
        info.comment.map(item => {
          if(item.picurl.length){
            console.log('pic lengthj')
            let picurl = []
            item.picurl.map(itm => {
              let obj = {}
              obj.url = itm
              picurl.push(obj)
            console.log(itm,'itm')
            })
            item.picurl = picurl
          }
        })
        this.info = info
        console.log(info,'info comment')
      } else {
        this.$toast(result.message);
      }
    },
  },
};
</script>
<style lang='less'>
.huli-detail {
  background: #f5f5f5f5;
  padding-bottom: 50px;
  overflow: scroll;
  .btn-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    .van-button {
      padding-left: 20px;

      padding-right: 20px;
    }
  }
  .custom-cell {
    padding-left: 0;
    padding-right: 0;
    background: #fff;

    .custom-title {
      font-size: 16px;
    }
    .van-cell__title {
      padding-left: 10px;
    }
  }
  .create-time {
    padding: 8px 0;
    color: #999;
    font-size: 13px;
  }
  .comment-grid {
    .van-grid-item__content {
      padding: 0;
    }
  }
  .common-panel {
    margin-top: 10px;
    background: #fff;
    padding: 15px;
  }
  .slider {
    width: 100%;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .desc {
    padding: 0 15px;
    background: #fff;
    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      color: #000;
      padding: 10px 0;
    }
    .description {
      line-height: 1.5;
      color: #999;
      .ellipsisLine(3)
    }
  }
  .price-table {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 0 20px 0;
    .right {
      color: #999;
      font-size: 14px;
    }
    .left {
      flex: 1;
      font-size: 18px;
      .line-price {
        color: #999;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .common-desc {
    p {
      color: #999;
      // line-height: 1.5;
    }
  }
  .comment-pre {
    color: #999;
    line-height: 1.5;
    font-size: 13px;
  }
  .huli-common-title {
    margin-bottom: 15px;
    .right-arrow {
      display: flex;
      justify-content: flex-end;
      color: #999;
      font-size: 13px;
      flex: 1;
    }
    h3 {
      font-size: 16px;
      margin-bottom: 15px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      em {
        display: inline-block;
        width: 5px;
        height: 17px;
        background: linear-gradient(0deg, #fcc9cb, #f7757b);
        border-radius: 5px;
        margin-right: 6px;
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    img{
      height: 80%;
    }
  }

}
</style>